<template>
  <ul v-masonry transition-duration="0.3s" item-selector=".grid-item">
    <li v-masonry-tile class="grid-item" v-for="(task, index) in taskList">
      <el-popover
        placement="right"
        width="500"
        trigger="hover"
        :open-delay='500'
      >
        <div style="margin:0">
          <div v-html=" '<h3>'+task.title + '</h3>\n' + task.desc"></div>
        </div>
        <div slot="reference">
          <div class="task-video" v-if="task.video" v-html="task.video"></div>
          <a href="javascript:void(0);" class="a-img" v-else-if="task.img">
            <img :src="task.img" alt="">
          </a>
          <h2 class="li-title">{{task.title}}</h2>
          <p class="description">{{task.desc}}</p>
          <div class="qianm clearfloat" v-if="task.money">
            <span class="sp1"><b>{{task.money ? '￥' + task.money : ''}}</b></span>
            <p class="clearfloat good-and-look" v-if="false">
              <span class="good"><i class="icon-zan iconfont"></i>200</span>
              <span class="look"><i class="icon-Artboard iconfont"></i>688</span>
            </p>
            <img v-if="false" src="../../../static/z39pc/images/avatar.png" class="sp2" alt=""/>
            <span v-if="false" class="sp3">志强不息</span>
          </div>
        </div>
      </el-popover>
    </li>

  </ul>

</template>
<script>
  import Vue from 'vue'
  import {VueMasonryPlugin} from 'vue-masonry';
  Vue.use(VueMasonryPlugin)

  export default {
    name: "sub-masonry",
    props: ['taskList'],

  };
</script>

<style>
  .waterfull ul li .description {
    text-overflow: ellipsis;
    text-align: left;
    border-bottom: none;
  }

  .waterfull ul li .li-title {
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-video {
    width: 284px;
    height: 200px;
  }

  .task-video .video-js {
    width: 100%;
    height: 100%;
  }
</style>
